<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>在JSX中使用表达式</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>

  	<!-- 

			1.可以在JSX当中使用JavaScript表达式，在JSX当中的表达式要包含在大括号里

			2.JSX本身也是一种表达式,编译之后，JSX会被转化为普通的JavaScript对象

  	 -->

    <div id="root"></div>

    <script type="text/babel">

      function formatName(user) {

        return user.firstName + ' ' + user.lastName

      }

      function getGreeting(user) {
        
        if(user) {

          return <h1>Hello, { formatName(user) }</h1>

        }

        return <h1>Hello, Stranger</h1>
      }

      const user = {
        firstName: 'Harper',
        lastName: 'Perez'
      }

      const user2=''

      ReactDOM.render(
        
        <div>

          <h1>Hello, { formatName(user) }</h1>

          <h2>Hello,{ user.firstName }</h2>

          <h3>{ 2+2 }</h3>

          <div>{ getGreeting(user2) }</div>

        </div>,
        
        document.getElementById('root')
      )
    </script>
  </body>
</html>
